<script setup xmlns="http://www.w3.org/1999/html">
import {ref} from "vue";
// 导入axios
import axios from "axios";
import {ElMessage} from "element-plus";

const formModel = ref({
  username: "",
  password: "",
});

const form = ref();

const rules = {
  username: [
    {required: true, message: "请输入用户名", trigger: "blur"},
    {min: 3, max: 10, message: "用户名必须是 5-10位 的字符", trigger: "blur"},
  ],
  password: [
    {required: true, message: "请输入密码", trigger: "blur"},
    {message: "密码必须是 6-15位 的非空字符", trigger: "blur"},
  ],
};

const reset = () => {
  formModel.value.username = '',
      formModel.value.password = ''
}

const onSubmit = async () => {
  console.log(1111);
  await form.value.validate()
  const res = await axios.post('http://localhost:8080/user/register', formModel.value)
  if (res.data.code == 0) {
    ElMessage.success("注册成功！")
    reset()
  } else {
    ElMessage.error(res.data.message)
  }
}
</script>

<template>
  <div class="flex flex-col items-center justify-center min-h-screen bg-background">
    <div class="p-6 rounded-lg w-full max-w-sm">
      <div class="box bg-card p-6 rounded-lg shadow-md w-full max-w-sm">
        <h1 class="text-3xl font-bold text-primary">吃啥</h1>
        <p class="text-muted-foreground text-sm mb-4">欢迎你的加入</p>
      </div>
      <br>
        <el-form
            :model="formModel"
            :rules="rules"
            ref="form"
            size="large"
            autocomplete="off"
        >
          <el-form-item prop="username">
            <label class="text-muted-foreground text-sm" for="username">用户名</label>
            <el-input
                v-model="formModel.username"
                placeholder="请输入用户名"
            ></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <label class="text-muted-foreground text-sm mt-4" for="password">密码</label>
            <el-input
                v-model="formModel.password"
                type="password"
                placeholder="请输入密码"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">注册</el-button>
            <el-button @click="$router.push('/login')">返回登录</el-button>
            <el-button @click="reset">重置</el-button>
          </el-form-item>
        </el-form>
    </div>
  </div>
</template>

<style scoped>
</style>
